<template>
	<view class="page-box">
		<view class="head-box">
			<view>
				<view class="earnings-title">
					团队订单数量（单）
				</view>
				<view class="earnings-value">
					{{order_num}}
				</view>
			</view>
			<view>
				<view class="earnings-title">
					团队订单金额（元）
				</view>
				<view class="earnings-value">
					{{order_price}}
				</view>
			</view>
		</view>
		<view class="tab-box">
			<view class="tab-item-box" v-for="(item,index) in tabData" :key='index'
				:class="pitchTab == item.id ? 'tab-pitch-box' : 'tab-un-pitch-box'" @click="tabClick(item)">
				{{item.name}}
			</view>
		</view>
		<scroll-view class="content-box" scroll-y lower-threshold='100' :refresher-enabled='true'
			:refresher-triggered='isRefresher' @scrolltolower='scrolltolower' @refresherrefresh='refresherrefresh'>
			<view class="order-item-box" v-for="(item,index) in orderList" :key='index'>
				<image class="order-img" :src="item.image" mode=""></image>
				<view class="order-info-box">
					<view class="name-money-box">
						<text class="name-text">{{item.goods_name}}</text>
						<text class="money-text">{{item.commission_price}}元</text>
					</view>
					<view class="user-name-box">
						{{item.username}}
					</view>
					<view class="time-box">
						{{item.createtime_text}}
					</view>
				</view>
			</view>
			<view class="botton-text" v-if="orderList.length > 4">
				-------已经到底了-------
			</view>
		</scroll-view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabData: [{
					name: '全部',
					id: 0
				}, {
					name: '已计入',
					id: 1
				}],
				pitchTab: 0,
				order_num: '',
				order_price: '',
				orderList: [],
				isRefresher: false,
				page: 1,
				total: 0
			}
		},
		onShow() {
			this.getOrderList(false)
		},
		methods: {
			getOrderList(status) {
				this.isRefresher = status
				let params = {
					type: this.pitchTab,
					page: this.page
				}
				this.$http.post('api/bonus/commissionOrder', params).then((res) => {
					let data = res.data
					console.log(data,'-----data')
					this.order_num = data.order_num || 0
					this.order_price = data.order_price || 0
					this.isRefresher = false
					if (this.page == 1) {
						this.orderList = data.data.data || []
					} else {
						this.orderList.concat(data.data.data || [])
					}
					this.total = data.data.total || 0
				}).catch((err) => {
					this.order_num = 0
					this.order_price = 0
					this.orderList = []
					this.isRefresher = false
					this.total = 0
				})
			},
			tabClick(item) {
				this.pitchTab = item.id
				this.page = 1
				this.getOrderList(false)
			},
			// 滚动到底部
			scrolltolower() {
				this.page++
				this.getOrderList(false)
			},
			// 下拉刷新
			refresherrefresh() {
				this.page = 1
				this.getOrderList(true)
			}
		}
	}
</script>

<style>
	.page-box {
		width: 100%;
		height: 100%;
	}

	.head-box {
		width: 100%;
		height: 114px;
		background-image: url(../../static/commission-haed-bg.png);
		background-size: 100% 100%;
		display: flex;
		padding: 24px 16px;
		box-sizing: border-box;
	}

	.head-box>view {
		width: 50%;
		height: 100%;
	}

	.earnings-title {
		font-size: 12px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #B5B5B5;
	}

	.earnings-value {
		margin-top: 17px;
		font-size: 24px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.tab-box {
		width: 100%;
		height: 68px;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.tab-item-box {
		width: 96px;
		height: 32px;
		line-height: 32px;
		text-align: center;
		border-radius: 16px;
		font-size: 14px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
	}

	.tab-pitch-box {
		border: 1px solid #020202;
		background: #020202;
		color: #FFFFFF;
	}

	.tab-un-pitch-box {
		border: 1px solid #E5E5E5;
		color: #8E8E8E;
	}

	.content-box {
		height: calc(100% - 182px);
		width: 100%;
		padding: 0px 16px;
		box-sizing: border-box;
	}

	.order-item-box {
		width: 100%;
		height: 132px;
		border-bottom: 1px solid #E5E5E5;
		display: flex;
		align-items: center;
	}

	.order-img {
		width: 100px;
		height: 100px;
		border-radius: 8px;
	}

	.order-info-box {
		margin-left: 16px;
		width: calc(100% - 116px);
		height: 100px;
		position: relative
	}

	.name-money-box {
		width: 100%;
		height: 16px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.name-text {
		font-size: 16px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #010101;
	}

	.money-text {
		font-size: 14px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FC5619;
	}

	.user-name-box {
		margin-top: 12px;
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #8E8E8E;
	}

	.time-box {
		position: absolute;
		bottom: 0px;
		padding: 0px;
		margin: 0px;
		font-size: 14px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #8E8E8E;
	}

	.botton-text {
		width: 100%;
		height: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #8E8E8E;
	}
</style>
